<template>
	<view class="member">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption">
			<block v-for="(item,index) in list" :key="index">
				<view class="member_item" @click="selectMember(item)">
					<view class="member_info">
						<view class="member_text">
							<view class="">
								购买时间：{{item.pay_time}}
							</view>
							<view class="" style="display: flex;align-items: center;">
								购买后7天内可无理由退款<u-icon name="question-circle" size="15" @click="rule"></u-icon>
							</view>
						</view>
					</view>
					
					<view class="member_money" v-if="item.status === 1 && item.days > 7">
						<text>购买金额</text>
						<view class="oil-item-data">
							<text>￥</text>
							{{(item.price)}}
							<!-- <text style="color: #F12F63;">元</text> -->
						</view>
					</view>
					<view class="member_money" v-else>
						<text>购买金额</text>
						<view class="oil-item-data">
							<text>￥</text>
							{{(item.price)}}
							<!-- <text style="color: #F12F63;">元</text> -->
						</view>
						<view class="" style="margin-top: 20rpx;">
							<u-button v-if="item.refundStatus == 0" shape="circle" size="mini" text="申请退款" color="#F12F63;" @click="toDrawback2(item.orderno,item.amount,item.surplus)"></u-button>
							<u-button v-else size="mini" :plain="true" shape="circle" text='退款详情' color="#F12F63;" @click="toDrawbackDetail(item.orderno)"></u-button>
						</view>
					</view>
				</view>
			</block>
			<mescroll-empty v-if="list.length==0"></mescroll-empty>
		</mescroll-body>
		
		<!-- <view class="member-confirm">
			<view class="member-btn" @click="checkedMember()">
				<text>确定</text>
			</view>
		</view> -->
		<uni-popup ref="memberOilPopup" type="bottom" background-color="#fff" :mask-click="false">
			<scroll-view scroll-y="true" style="height: 70vh;">
				<view class="m-detail member-oil-popup">
					<view class="w-center">
						<view class="m-detail-title df df-justify-content-between df-align-items coutem">
							<view></view>
							<text>退款规则</text>
							<i class="iconfont icon-guanbi" style="color: #999999;font-size: 32rpx;"
								@click="$refs.memberOilPopup.close()">
							</i>
						</view>
						<view class="" style="padding: 40rpx 0;font-size: 28rpx;">
							<rich-text :nodes="memberRichText"></rich-text>
						</view>
					</view>
				</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	import api from '@/api/order.js';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list: [],
				id: '',
				member: {},
				memberRichText:'',//规则
				showRadio: false, // 默认radio不显示，当加油需要选择优惠券时显示radio
				downOption: {
					use: true,
				},
				upOption: {
					use: true,
					auto: true,
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 15, // 每页数据的数量
						time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					},
					empty: {
						use: false, // 是否显示空布局
						icon: "https://www.mescroll.com/img/mescroll-empty.png", // 图标路径
						tip: '~ 暂无相关数据 ~', // 提示
						btnText: '去逛逛 >', // 按钮
						fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效 (transform会使fixed失效,最终会降级为absolute)
						top: "100rpx", // fixed定位的top值 (完整的单位值,如 "10%"; "100rpx")
						zIndex: 99 // fixed定位z-index值
					}
				},
			};
		},
		onShow() {
			this.mescroll.resetUpScroll();
		},
		onLoad(options) {
			this.id = options.id
		},
		
		computed: {
			isChecked(){
				return function(id){
					return this.member.id*1 === id*1
				};
			}
		},
		
		methods: {
			rule(){
				this.$refs.memberOilPopup.open();
			},
			toDrawback2(orderno,amount,surplus){
				uni.navigateTo({
					url:'/pages_order/pages/order/drawback-coupon/drawback?orderno=' + orderno + '&amount=' + amount + '&surplus=' + surplus
				})
			},
			toDrawbackDetail(orderno){
				uni.navigateTo({
					url:'/pages_order/pages/order/coudrawback-Detail/drawback-Detail?orderno=' + orderno
				})
			},
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			
			upCallback(page) {
				let data = {
					page: page.num
					// station_id: this.id
				};
				let _this = this;
				api.getCoulist(data).then(res => {
					this.mescroll.endBySize(res.data.data.length, res.data.total);
					//设置列表数据
					if (page.num == 1) this.list = [];
					// #ifdef MP-WEIXIN
					_this.memberRichText = res.data.coupon_refund
					// #endif
					// #ifdef MP-ALIPAY
					// 优惠券详情
					let memberRichText = res.data.coupon_refund
					/* 处理支付宝小程序富文本显示问题 */
					_this.memberRichText = parseHtml(memberRichText);
					// #endif
					_this.list = _this.list.concat(res.data.data);
					if(_this.list.length > 0){
						_this.member = _this.list[0];
					}else{
						_this.member = null;
					};
				}).catch(() => {
					this.mescroll.endErr();
				});
			},
			
			checkedMember(){
				let _this = this
				uni.navigateBack({
					delta: 1,
					success() {
						uni.$emit('member_info', _this.member);
					}
				});
			},
			
			selectMember(item) {
				let arr = {}
				arr = item
				this.member = arr
				item.showRadio = !item.showRadio;
				if(item.showRadio == false){
					this.member = {}
				}else{
					this.isChecked()
				}
			}
		}
	}
</script>

<style lang="scss">
	.member{
		background-color: #F3F3F3;
		.member_item{
			min-height: 200rpx;
			display: flex;
			align-items: center;
			border-radius: 20rpx;
			background-color: #FFF;
			overflow: hidden;
			margin: 30rpx 30rpx 0;
			box-sizing: border-box;
			
			.member_money{
				min-height: 200rpx;
				width: 30%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background-color: #fff;
				border-radius: 0 16rpx 16rpx 0;
				border-left: 2rpx dashed #e5e5e5;
				box-sizing: border-box;
				.oil-item-data {
					color: #F12F63;
					font-size: 40rpx;
					font-weight: bold;
				
					text {
						font-size: 30rpx;
					}
				}
			}
			
			.member_info{
				flex: 1;
				height: 100%;
				background-color: #fff;
				display: flex;
				align-items: center;
				padding: 10rpx 30rpx;
				border-radius: 16rpx 0 0 16rpx;
				box-sizing: border-box;
				.member_text{
					display: flex;
					flex-direction: column;
					font-size: 24rpx;
					text{
						margin: 12rpx 0;
					}
				}
			}
		}
		.member-confirm {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 20rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			background-color: #fff;
			box-sizing: border-box;
			.member-btn {
				width: 180rpx;
				height: 64rpx;
				line-height: 64rpx;
				background-color: #F12F63;
				font-size: 28rpx;
				color: #fff;
				text-align: center;
				border-radius: 8rpx;
			}
		}
	}
	.m-detail {
		width: 100%;
		// height: 750rpx;
		padding-bottom: 112rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
	
		.w-center {
			.m-detail-title {
				padding-top: 30rpx;
	
				text {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #1A1A1A;
				}
			}
	
			.label-title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #1A1A1A;
				// padding-bottom: 40rpx;
			}
	
			.detail-item {
				padding-bottom: 30rpx;
	
				view {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}
	
				text {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
				}
			}
	
			.shop-list {
				.act-item {
					border: 1px solid #F12F63 !important;
					color: #F12F63;
					background: rgba(241, 47, 99, .1);
					box-sizing: border-box;
				}
	
				view {
					// min-width: 130rpx;
					height: 60rpx;
					// padding: 0 40rpx;
					background: #F2F2F2;
					border-radius: 10rpx;
					text-align: center;
					line-height: 60rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #7B8195;
					letter-spacing: 1px;
					margin-right: 40rpx;
					margin-bottom: 30rpx;
					padding: 0 30rpx;
				}
			}
	
		}
	
		.b-out {
			padding-top: 60rpx;
	
			.sel-btn {
				width: 440rpx;
				height: 88rpx;
				border-radius: 44rpx;
				background: #F12F63;
				text-align: center;
				line-height: 88rpx;
				margin-top: 40rpx;
				margin: 0 auto 30rpx auto;
				// margin: 60rpx auto 60rpx auto;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	
	}
</style>